<template>
	<view>
		<van-popup v-model="showPop" get-container="body" position="bottom" :style="{ height: height}"
			@click-overlay="popOpen()">
			<view class="pop-wrap">
				<view class="pop-top">
					<view class="pop-title flexCenter">
						<span class="pl10">{{title}}</span>
					</view>
				</view>

				<view class="pop-content" :style="{background:bgColor}">
					<view>
						<slot name="content"></slot>
					</view>
				</view>

				<view class="pop-button">
					<van-button class="flexItem" style="margin: 0px 5px;" color="#337AB7" @click="confirm">确定
					</van-button>
					<van-button class="flexItem" style="margin: 0px 5px;" color="#FF9900" @click="popClose()">关闭
					</van-button>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
			}
		},
		props: {
			height: {
				type: String,
				default: '70%'
			},
			title: {
				type: String,
				default: ""
			},
			isSearch: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: "#F7F7F7"
			}
		},
		mounted() {

		},
		methods: {
			popOpen() {
				this.showPop = true;
			},
			confirm() {
				this.$emit('popConfirm');
			},
			popClose() {
				this.showPop = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.pop-wrap {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.pop-title {
		background-color: #386FA8;
		font-weight: 600;
		width: 100%;
		color: #FFFFFF;
		height: 45px;
	}

	.pop-top {
		width: 100%;
		z-index: 10;
	}

	.pop-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		width: 100%;
		overflow-y: scroll;
	}

	.pop-button {
		height: 44px;
		bottom: 0;
		width: 100%;
		display: flex;
		z-index: 10;
	}
</style>
